<template>
  <div style="display:flex;">
    <div :style="'position: relative;color:'+color+';'" @click="goto" >
      <svg-icon icon-class="list" />
      <span>{{name}}</span>
      <el-badge v-if="count > 0" :value="count" class="item badge"/>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'OrderList',
    data() {
      return {
      }
    },
    props:{
      count: {
        type: Number,
        default: ''
      },
      url: {
        type: String,
        default: ''
      },
      color: {
        type: String,
        default: ''
      },
      name: {
        type: String,
        default: ''
      },
    },
    methods: {
      goto() {
        this.$router.replace({ path: "/orders/list" })
      },
    }
  }
</script>

<style>
  .badge{
    position: absolute;
    top: -8px;
    left: 14px;
  }
</style>
